/**
  @date: 2019年5月22日14:25:53
  @latest updates: 2019年6月18日17:09:42
  @author: liump
  @desc: 管道 安装点操作弹框组件
  @data: mock/amapWorkMessage.json
 */
<template>
  <el-card class="amap-pipeline-work-dialog" id="pipelineWorkDialog">
    <div slot="header" class="clearfix">
      <span>线路工作内容</span>
      <span @click="handleAddPipelineWork">
        <i class="el-icon-plus"></i>
        <span class="clearfix-add-work">添加内容</span>
      </span>
    </div>
    <el-form>
      <el-form-item v-for="(item, index) of pipelineWork_list" :key="item.id">
        <el-col :span="2">
          <el-button
            icon="el-icon-minus"
            circle
            size="mini"
            @click="handleSplicePipelineWork(index)"
          ></el-button>
        </el-col>
        <el-col :span="10">
          <el-cascader
            :options="options"
            @focus="handleChangePipeline(index)"
            @active-item-change="handleItemChange"
            v-model="item.optionId"
          ></el-cascader>
        </el-col>
        <el-col :span="3">长度:</el-col>
        <el-col :span="3">
          <el-input v-model="item.len" class="item_input"></el-input>
        </el-col>
        <el-col :span="3">数量:</el-col>
        <el-col :span="3">
          <el-input v-model="item.num" class="item_input"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="10">请选择类型:</el-col>
        <el-col :span="14">
          <el-select v-model="img_type_label" placeholder="请选择">
            <el-option
              v-for="item in type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <img
                :src="item.img_url"
                alt
                style="vertical-align:middle;margin-left:10px;width:28px;height:28px;"
              />
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handlePipelineWorkCancel">取消</el-button>
        <el-button type="primary" @click="handlePipelineWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'amapPipelineWorkDialog',
  props: {
    point_id: Number,
    changeToolsIndex: Number
  },
  data() {
    return {
      // 级联树形结构
      options: [
        {
          label: '打手井',
          value: 1,
          children: [
            {
              label: '埋式',
              value: 54,
              children: [
                {
                  label: '6芯',
                  value: 1007
                }
              ]
            }
          ]
        },
        {
          label: '开挖PVC110管',
          value: 2,
          childred: []
        }
      ],
      // 工作内容集合
      pipelineWork_list: [
        {
          id: 0,
          optionId: [],
          workMessage: [],
          len: '',
          num: 1
        }
      ],
      index: 0, // 当前行的序列
      type_list: [], // 图标类型选择的数组
      img_type_label: '' // 图片类型文本
    }
  },
  methods: {
    /**
     * element 级联选择
     * @method handleItemChange
     * @param { Number } val 该参数为选择的级联数组
     */
    handleItemChange(val) {
      // console.log('active item:', val)
      // // 获取 ID
      // let optionId = val[val.length - 1]
      // // 获取 length
      // let len = val.length
    },
    /**
     * 获取工作内容的行序号(下标)
     * @method handleChangePipeline
     * @param {Number} index 行数据的序列
     */
    handleChangePipeline(index) {
      this.index = index
    },
    /**
     * 弹框中添加内容按钮点击事件
     * @method handleAddPipelineWork
     */
    handleAddPipelineWork() {
      let len = this.pipelineWork_list.length
      let obj = {
        id: len,
        optionId: [],
        workMessage: [],
        len: '',
        num: 1
      }
      this.pipelineWork_list.push(obj)
    },
    /**
     * 初始化数组,用于在弹框开启的时候清空数据
     * @method handleInitData
     */
    handleInitData() {
      let obj = {
        id: 0,
        optionId: [],
        workMessage: [],
        len: '',
        num: 1
      }
      this.pipelineWork_list = []
      this.pipelineWork_list.push(obj)
      // 初始化图标类型选择
      // this.type_list = []
    },
    /**
     * 父组件调用子组件的方法,通知子组件当前是什么菜单(如:)
     * @method handleChangeImg
     * @param { String } img_type 接收菜单类型参数,用于切换图标选择类型数组
     */
    handleChangeImg(img_type) {
      // console.log("TCL: handleChangeImg -> img_type", img_type)
      let type_list
      switch (img_type) {
        case 'LG':
          type_list = [
            {
              value: '',
              label: '无',
              img_url: ''
            },
            {
              value: 'D-ODG',
              label: '原有电杆',
              img_url: '/static/amap/d_odg.png'
            },
            {
              value: 'D-NDG',
              label: '新立电杆',
              img_url: '/static/amap/d_ndg.png'
            },
            {
              value: 'D-CDG',
              label: '更换电杆',
              img_url: '/static/amap/d_cdg.png'
            }
          ]
          this.type_list = type_list
          break

        default:
          break
      }
    },
    /**
     * 弹框中删除工作内容的按钮事件
     * @method handleSplicePipelineWork
     * @param { Number } index 当前数组对象的序列
     */
    handleSplicePipelineWork(index) {
      this.pipelineWork_list.splice(index, 1)
    },
    /**
     * 确认按钮,向父组件传递数据的方法
     * @method handlePipelineWorkConfirm
     */
    handlePipelineWorkConfirm() {
      // 通过 optionId 获得 工作内容文本
      this.pipelineWork_list.forEach((el, index) => {
        el.optionId.forEach(elem => {
          // 遍历树形结构找到optionId对应的文本
          this.getArray(this.options, elem, el.workMessage)
        })
      })
      let data = {
        point_id: this.point_id,
        pipelineWork_list: this.pipelineWork_list,
        img_type: this.img_type_label,
        confirm: true,
        show: false
      }
      this.type_list = []
      this.$emit('handlePipelineWorkConfirm', data)
    },
    /**
     * 取消按钮,向父组件传值的方法
     */
    handlePipelineWorkCancel() {
      let data = {
        point_id: this.point_id,
        confirm: false,
        show: false
      }
      this.$emit('handlePipelineWorkCancel', data)
      this.type_list = []
    },
    /**
     * 遍历树形结构,根据树形结构找到指定的工作内容文本
     * @method getArray
     * @param {String} optionId
     */
    getArray(data, optionId, list) {
      for (var i in data) {
        if (data[i].optionId == optionId) {
          // console.log(data[i].label, 1111);
          // 在 workMessage 数组中添加 label
          list.push(data[i].label)
          break
        } else {
          this.getArray(data[i].children, optionId, list)
        }
      }
    },
    /**
     * 废弃 -> 请求工作内容级联数据,级联第一级
     */
    getWorkMessage() {
      let getPtwoInfoSucc = res => {
        res = res.data.data

        // 级联组件需要 label字段用于渲染下拉框文本,value字段用于获取optionId查找下级级联
        res.forEach(el => {
          el.label = el.optionName
          el.value = el.optionId
          el.children = []
        })
        this.options = res
      }
      let getPtwoInfoErr = res => {}
      let postData = {
        optionDeep: '1',
        teamType: '1',
        parentId: ''
      }
      let param = {
        url: '/api/web/ptwo/getPtwo',
        methods: 'post',
        data: postData,
        success: getPtwoInfoSucc,
        error: getPtwoInfoErr
      }
      this.$https(param)
    },
    /**
     * 废弃 -> 请求工作内容级联数据,级联第二级
     */
    getTwoWorkMessage(optionId = '') {
      // 通过optionId找到级联options的序号,也就是对应在第几列
      let i
      this.options.forEach((el, index) => {
        if (el.optionId == optionId) {
          i = index
        }
      })
      this.work_one_index = i

      let getPtwoInfoSucc = res => {
        res = res.data.data

        res.forEach(el => {
          el.label = el.optionName
          el.value = el.optionId
          el.children = []
        })
        this.options[i].children = res
      }
      let getPtwoInfoErr = res => {}
      let postData = {
        optionDeep: '',
        teamType: '1',
        parentId: optionId
      }
      let param = {
        url: '/api/web/ptwo/getPtwo',
        methods: 'post',
        data: postData,
        success: getPtwoInfoSucc,
        error: getPtwoInfoErr
      }
      if (!this.options[i].children.length) {
        this.$https(param)
      }
    },
    /**
     * 废弃 -> 请求工作内容级联数据,级联第三级
     */
    getThreeWorkMessage(optionId = '') {
      // 通过optionId找到级联options的序号,也就是对应在第几列
      // 级联第三级
      let i
      this.options[this.work_one_index].children.forEach((el, index) => {
        if (el.optionId == optionId) {
          i = index
        }
      })
      this.work_two_index = i

      let getPtwoInfoSucc = res => {
        res = res.data.data
        res.forEach(el => {
          el.label = el.optionName
          el.value = el.optionId
        })
        this.options[this.work_one_index].children[
          this.work_two_index
        ].children = res

        if (!res.length) {
          delete this.options[this.work_one_index].children[this.work_two_index]
            .children
        }
      }
      let getPtwoInfoErr = res => {}
      let postData = {
        optionDeep: '',
        teamType: '1',
        parentId: optionId
      }
      let param = {
        url: '/api/web/ptwo/getPtwo',
        methods: 'post',
        data: postData,
        success: getPtwoInfoSucc,
        error: getPtwoInfoErr
      }
      if (
        !this.options[this.work_one_index].children[this.work_two_index]
          .children.length
      ) {
        this.$https(param)
      }
    },
    /**
     * 模拟请求工作内容级联数据
     * @method getMockData
     */
    getMockData() {
      let success = res => {
        // console.log(res, 222)
        this.options = res.data
      }
      let error = res => {}
      let data = {}
      let param = {
        url: '',
        methods: 'post',
        data: data,
        success: success,
        error: error
      }
      // this.$https(param)
      // mock的模拟数据
      // this.$axios.get("/mock/amapWorkMessage.json")
      //   .then(res => {
      //     // console.log(res,"axios.get")
      //     success(res);
      //   });
    }
  },
  mounted() {
    // this.getWorkMessage()
    this.getMockData()
  }
}
</script>

<style scoped>
.amap-pipeline-work-dialog {
  width: 300px;
  z-index: 100;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 12px;
}
.clearfix {
  display: flex;
  justify-content: space-between;
}
.clearfix span:nth-child(2) {
  cursor: pointer;
}
.clearfix-add-work {
  margin-left: 2px;
}
</style>

<style>
/* 弹框样式修改 */
/* 弹框card 内边距 */
.amap-pipeline-work-dialog .el-card__body {
  padding: 8px;
}
/* 删除工作内容按钮 */
.amap-pipeline-work-dialog .el-button--mini.is-circle {
  padding: 3px;
}
/* 调整每行的外边距 */
.amap-pipeline-work-dialog .el-form-item {
  margin-bottom: 6px;
}
/* 调整确认取消按钮 */
.amap-pipeline-work-dialog .el-button {
  padding: 6px 18px;
  font-size: 12px;
}
.amap-pipeline-work-dialog .el-input__inner,
.amap-pipeline-work-dialog .el-cascader .el-input__inner {
  height: 30px;
}
.amap-pipeline-work-dialog .el-col {
  font-size: 12px;
}
.amap-pipeline-work-dialog .item_input > input {
  padding: 0;
  text-align: center;
}
</style>


